<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>借阅详情</title>
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
		<link rel="stylesheet" type="text/css" href="../css/icons-extra.css" />
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<link rel="stylesheet" type="text/css" href="../css/exclusive.css" />
		<script src="../js/mui.min.js"></script>
		<style>
			.mui-control-content {
				background-color: white;
				min-height: 500px;
			}
			
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			body{
				 height: auto;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-table-view" style="box-shadow:none; border: none; position: fixed; top:0;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">商品详情</h1>
			<a id='showUserPicker' class="mui-icon  mui-icon-more-filled mui-pull-right"></a>
		</header>
		<div class="mui-slider" style="border-bottom:1px solid #EFEFF4; margin-top: 11%;">
			<div class="mui-slider-group mui-slider-loop">
				<!-- 第一张 -->
				<div class="mui-slider-item">
					<a href="#">
						<img src="../images/bookImage/1.jpg" height="300">
					</a>
				</div>
				<!-- 第二张 -->
				<div class="mui-slider-item">
					<a href="#">
						<img src="../images/bookImage/2.jpg" height="300">
					</a>
				</div>
				<!-- 第三张 -->
				<div class="mui-slider-item">
					<a href="#">
						<img src="../images/bookImage/3.jpg" height="300">
					</a>
				</div>
				<!-- 第四张 -->
				<div class="mui-slider-item">
					<a href="#">
						<img src="../images/bookImage/4.jpg" height="300">
					</a>
				</div>
			</div>
			<div class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			</div>
		</div>

		<div class="mui-table-view mui-table-view-striped mui-table-view-condensed">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell ">
					<span class="word">算法导论(原书第2版)</span>
					<p>
						<font color="red">¥39.6</font>
						<font class="old_price">¥49.5
						</font>
						<p>
				</li>
			</ul>
		</div>
		<div class="mui-content">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right">
						<font class="word">已选</font>
					</a>

					<div class="mui-collapse-content">
						<div class="mui-numbox" data-numbox-min='1' data-numbox-max='9' ">
						 <button class="mui-btn mui-btn-numbox-minus " type="button ">-</button>
						 <input id="test " class="mui-input-numbox " type="number " value="5" />
						 <button class="mui-btn mui-btn-numbox-plus " type="button ">+</button>
					   </div>
		            </div>
		        </li>

		    </ul>
		</div>
		<div class="mui-content">
			<div id="slider" class="mui-slider" style="background-color: #FFFFFF;margin-top:.9rem ; ">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted ">
					<a class="mui-control-item" href="#item1mobile">
						商品详情
					</a>
					<a class="mui-control-item" href="#item2mobile">
						规格参数
					</a>
					<a class="mui-control-item" href="#item3mobile">
						售后保障
					</a>
				</div>
			    <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
							<ul class="mui-table-view">
	<li class="mui-table-view-cell">
										<img src="../images/bookImage/img-x1.jpg" style="height: 100%;" />
									</li>

								</ul>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div id="scroll2" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view"><li class="mui-table-view-cell"><p>编者/作者： J.K.罗琳 </p><p>译者：</p> <p>出 版 社： 人民文学</p><p> 出版时间： 2014.01</p><p>版    次： 1</p><p>印    次：</p><p> I S B N ： 7020103332</p><p >所属分类：图书 >> 文学 >> 外国小说 >> 现代</p></li>
							</div>
						</div>

					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div id="scroll3" class="mui-scroll-wrapper ">
							<div class="mui-scroll">
								<ul class="mui-table-view"><li class="mui-table-view-cell"><p>正品：心田只做正品 假一赔一</p><p>供货：商品均由品牌商或一级经销商供货</p><p>送货：全国送达</p><p>运费：辽宁省内单张订单金额满58元免运费</p><p>退换货：签收15日内，商品及包装保持本网站出售时原状且配件齐全，不影响二次销售，全款退货</p></li>
						</div>

					</div>
				</div>
			</div>
		</div>

		<!-- 底部导航 -->
		<nav class="mui-bar mui-bar-tab" >
			<a class="mui-tab-item " href="#tabbar-with-contact " style="width: 20%;"  >
				<div id="icon-star" class="mui-icon mui-icon-star"></div>
				<div class="mui-tab-label word">收藏</div>
			</a>
			<a class="mui-tab-item mui-active " href="#tabbar " style="background-color: #EC971F;width: 40%;">
				<span class="mui-tab-label word" style="font-size:17px;color: #FFFFFF;">借阅</span>
			</a>
			<a class="mui-tab-item " href="#tabbar-with-map " style="background-color: #F14E41;width: 40%; ">
			
				<span class="mui-tab-label word" style="font-size:17px;color: #FFFFFF;">立即购买</span>
			</a>
		</nav>


		<script>
			/*mui.init({
				swipeBack: false
			});*/

			(function($) {
			/*	$('.mui-scroll-wrapper').scroll({
					indicators: true //是否显示滚动条
				});
				*/
			})(mui);

		</script>
	</body>

</html>